<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <el-card>
        <!-- 上面的的数据 结构 -->
        <tree-tools
          :tree-node="company"
          :is-root="true"
          @addDepts="addDepts"
        ></tree-tools>
        <!-- 来一个树形控件 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 接下来就是放置一个组件 -->
          <!-- el-tree里面的这个内容 就是插槽内容 =>填坑内容=>有多少个节点循环多少次 -->
          <!-- scope-slot是tree组件传递给每个节点的插槽内容的数据 -->
          <!-- 顺序一定是 执行slot-scope的赋值 才去执行props的传值 -->
          <tree-tools
            slot-scope="obj"
            :tree-node="obj.data"
            @delPatrs="getDepartmentsList"
            @editDept="editDept"
            @addDepts="addDepts"
          ></tree-tools>
        </el-tree>
      </el-card>
      <add-dept
        :show-dialog.sync="showDialog"
        :tree-node="node"
        @addDepts="getDepartmentsList"
        ref="departEdit"
      ></add-dept>
    </div>
  </div>
</template>

<script>
import treeTools from "./components/tree-tools.vue";
// import {formatellp} from '../../formate'
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";
// 引入弹窗
// import AddDept from "./components/add-dept";
import AddDept from "./components/add-dept.vue";
export default {
  components: { treeTools, AddDept, AddDept },
  data() {
    return {
      // 加载
      loading: false,
      // 默认不显示窗口
      showDialog: false,
      company: {}, // 就是头部的数据结构
      departs: [],
      defaultProps: {
        label: "name" // 表示 从这个属性显示内容
      },
      // node
      node: null
    };
  },
  methods: {
    // tree-tools的编辑功能
    editDept(node) {
      this.node = node;
      this.showDialog = true;
      this.$refs.departEdit.getDetailedit(node.id);
    },
    // tree-tools.vue 新增部门数据
    addDepts(node) {
      this.showDialog = true;
      // 因为node 是当前点击的部门 此时这个部门应该记录下来
      this.node = node;
      this.getDepartmentsList();
    },
    // 获取列表所有数据
    async getDepartmentsList() {
      this.loading = true;
      const result = await getDepartments();
      // 接受数据了
      this.company = { name: result.companyName, manager: "负责人", id: "" };
      this.departs = result.depts; // 需要将其转化成树形结构
      // 这里定义一个空串  因为 它是根 所有的子节点的数据pid 都是 ""
      this.departs = tranListToTreeData(result.depts, "");
      console.log(result);
      this.loading = false;
    }
  },
  mounted() {
    this.getDepartmentsList();
  }
};
</script>

<style lang="scss" scoped>
.drow-class {
  padding: 30px 50px;
  font-size: 18px;
}
</style>
